<template>
	<view class="shop_goods">
		<view class="shop_nav">
			<image :src="info.logo" mode=""></image>
			<view class="shop_info">
				<view class="info_title">
					<text class="icon" v-if="info.ispig==1">清 真</text>
					<text class="title">{{info.supname}}</text>
					<text @click="collectTap" class="iconfont icon-shoucang"
						:class="{collect_active:collecttext=='已收藏'}">{{collecttext}}</text>
				</view>
				<view class="price">
					<view class="grade">
						<text class="label">VIP</text>
						<text>{{info.vipdiscount}}折</text>
					</view>
					<view class="grade grade1">
						<text class="label">会员</text>
						<text>{{info.discount}}折</text>
					</view>
					<view class="jie_sheng">
						<text>近期{{info.orderNum}}人节省</text>
						<text class="zi">{{info.reduce}}元</text>
					</view>
				</view>
			</view>
		</view>

		<view class="">
			<uni-notice-bar :speed="16" show-icon scrollable color="#f00" :text="info.content" />
		</view>
		<view class="s_swiper_body">
			<view class="swiper_wp">
				<swiper class="s_swiper" :circular="true" :autoplay="true" :interval="3000" @change="swiperChange"
					v-if="info.thumb.length>0">
					<swiper-item class="s_swiper_item" v-for="(item,index) in info.thumb" :key="index"
						@click="prevImage(current)">
						<image class="s_swiper_image" :src="item" />
						<!-- <view class="describe">餐厅场景</view> -->
					</swiper-item>
				</swiper>
				<view class="indicator">
					<text>{{current}}/{{info.thumb.length}}</text>
				</view>
			</view>
			<view class="shop_time">
				<text>营业时间&nbsp;&nbsp;{{info.saletime}}</text>
				<text>人均消费{{info.avgsale}}元</text>
				<text class="iconfont icon-dianhuatianchong" @click="phoneCall(info.mobile)">电话</text>
			</view>
			<view class="discount">
				<text>商家提示</text>
				<text v-for="(item,index) in discount.discount" :key="index">{{item}}</text>
			</view>
			<view class="s_address">
				<view class="s_address_info">
					<text>{{info.address}}</text>
					<text>距您{{info.length}}</text>
				</view>
				<view class="s_location" @click="openMap(info)">
					<text class="yticon icon-icon-test"></text>
					<text>导航</text>
				</view>
			</view>
		</view>

		<!-- 		<view class="notes">
			<view class="title"> <text>付款说明</text> </view>
			<jyf-parser class="content" :html="discount.payinfo"></jyf-parser>
		</view> -->
		<!-- 菜单组件 -->
		<view class="">
			<menu-list ref ="menus" :discount="discount" :uid="info.uid"></menu-list>
		</view>
		<view class="s_button">
			<!-- <view class="s_share">
				<image src="../../static/share.png" mode=""></image>
				<view>分享</view>
				<button class="s_share_b" open-type="share" type="default"></button>
			</view> -->
			<view class="s_pay" @click="discountOrder">优惠买单</view>
			<button size="mini" @click="getShareImage">海报分享 赚<text v-text="info.shareprice"></text>%</button>
		</view>
		<!-- 一键授权 -->
		<uni-popup ref="popup" :is-mask-click="false">
			<view class=""
				style="text-align: center;background-color: #fff;border-radius: 20upx;padding: 30upx;line-height: 70upx;">
				<view class="" style="padding-bottom: 30upx;font-size: 32upx;">
					您还未授权，请授权！
				</view>
				<button style="font-size: 28upx;" open-type="getPhoneNumber"
					@getphonenumber="getUserProfile">一键授权</button>
			</view>
		</uni-popup>
		
		<!-- <preview-image v-show="isPrevImage" :isPrevImage.sync="isPrevImage" :imageList="[]"></preview-image> -->
		<view class="sharebg" v-if="shareImage!==''" @click="shareImage=''">
			<!-- #ifdef APP-PLUS||MP-WEIXIN -->
			<image @longpress="toSave" :src="shareImage" mode="widthFix"></image>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import Base64 from 'base-64';
	import PreviewImage from "./components/preview-image.vue"
	// 引入菜单组件
	import MenuList from "@/components/menu-list.vue"
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['Location'])
		},
		components: {
			PreviewImage,
			MenuList
		},
		data() {
			return {
				info: {
					address: "",
					avgsale: "",
					content: "",
					discount: "",
					industryid: "",
					introduce: "",
					isfavorite: false,
					ispig: "0",
					length: "",
					logo: "",
					mobile: "",
					orderNum: "0",
					reduce: null,
					saletime: "",
					supname: "",
					thumb: [],
					uid: "",
					vipdiscount: "",
					shareprice:'',
					x: "",
					y: "",
				},
				shareImage: '',
				collecttext: '收藏',
				current: 1,
				discount: {
					payinfo: '',
					discount: []
				},
				// isPrevImage: false, //自定义预览显示
			}
		},
		onLoad(option) {
			let that = this;
			this.info.uid = option.id ? option.id : this.gup('id', decodeURIComponent(option.scene));
			this.mid=this.gup('mid', decodeURIComponent(option.scene));
			if (!uni.getStorageSync('token')) {
				this.$refs.popup.open();
				return;
			}
			this.getInfo();
			this.getDiscount();
		},
		methods: {
			getUserProfile(e) {
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						let obj = e.detail;
						obj.code1 = loginRes.code;
						obj.mid = that.mid;
						that.$axios('login/xcxlogin', "POST", 'member', obj).then(
							res => {
								if (res.data.code == 200) {
									uni.setStorageSync('token', res.data.data);
									that.getInfo();
									that.getDiscount();
									//console.log(that.$refs.menuList);
									that.$refs.menus.getshopMenu();
									that.$refs.menus.getList();
									that.$refs.popup.close();
								}
							})
					},
					fail() {
						that.$api.msg('登录失败，请重试！')
					}
				})
			},
			getShareImage() {
				this.$axios('sharepic/create_poster', 'POST', 'supplier', {
					uid: this.info.uid
				}).then(res => {
					if (res.data.code == 200) {
						this.shareImage = res.data.data.url;
					}
				})
			},
			toSave() {
				var that = this;
				uni.showModal({
					title: '图片保存',
					content: '确定要保存图片吗',
					success: e => {
						if (e['confirm']) {
							uni.downloadFile({
								url: that.shareImage,
								success: function(url) {
									uni.saveImageToPhotosAlbum({
										filePath: url.tempFilePath,
										success: function(e) {
											uni.showToast({
												title: '图片保存成功',
												icon: 'none',
												duration: 2200
											});
										},
									});
								},
								fail(e) {
									console.log(e)
								}
							});
						}
					}
				});
			},
			discountOrder() {
				this.$axios('supplierGoods/payCode', 'POST', 'shop', {
					supplier_uid: this.info.uid
				}).then(res => {
					if (res.data.code == 200) {
						this.$navTo(res.data.data);
					}
				})
			},
			getDiscount() {
				this.$axios('supplierGoods/discountDesc', 'POST', 'shop', {
					uid: this.info.uid
				}).then(res => {
					if (res.data.code == 200) {
						this.discount = res.data.data;
					}
				})
			},
			getInfo() {
				let obj = {
					...this.Location,
					...{
						supplier_uid: this.info.uid
					}
				}
				this.$axios('supplierGoods/main', 'POST', 'shop', obj).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
						if (this.info.isfavorite) {
							this.collecttext = '已收藏';
						} else {
							this.collecttext = '收藏';
						}
					}
				})
			},
			swiperChange(e) {
				var that = this;
				that.current = e.detail.current + 1;
			},
			phoneCall(v) {
				uni.makePhoneCall({
					phoneNumber: v
				})
			},
			openMap(v) {
				let that = this;
				uni.openLocation({
					latitude: parseFloat(v.y),
					longitude: parseFloat(v.x),
					scale: 10,
					name: v.supname,
					address: v.address,
				});
			},
			collectTap() {
				this.$axios('favorite/set', 'POST', 'shop', {
					id: this.info.uid,	
					type: 1
				}).then(res => {
					if (res.data.code == 200) {
						if (res.data.data.isfavorite) {
							this.collecttext = '已收藏';
						} else {
							this.collecttext = '收藏';
						}
					}
				})
			},
			prevImage(v) {
				uni.previewImage({
					current: v - 1,
					urls: this.info.thumb
				})
			},
		}
	}
</script>

<style lang="scss">
	@import "/store/icon.css";

	page {
		background-color: #f2f2f2;
		padding-bottom: 210upx;
		color: #303133;
	}

	.shop_nav {
		background: #ffffff;
		display: flex;
		padding: 30upx 20upx;

		.price,
		.grade,
		.addre {
			display: flex;
			align-items: center;

			.grade {
				color: #8405dc;
				font-size: 24upx;

				.label {
					background: #000;
					border-radius: 10upx;
					color: #f3dd91;
					padding: 6upx 10upx;
				}

				text {
					padding: 0 10upx;
				}
			}

			.grade1 {
				.label {
					background: #f3dd91;
					color: #927419;
				}
			}

			.jie_sheng {
				border-left: 1px #666 solid;
				color: $bg-color;
				flex: 1;
				justify-content: flex-end;
				font-size: 24upx;
				margin-left: 10upx;
				padding: 0 20upx;
				font-weight: bold;

				.zi {
					color: #8405dc;
				}
			}
		}

	}

	.shop_nav image {
		border-radius: 10upx;
		height: 90upx;
		width: 90upx;
	}

	.shop_info {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		flex: 1;
		padding: 0 20upx;
	}

	.info_title {
		display: flex;
		align-items: center;
		font-weight: bold;
		width: 100%;

		.icon {
			border: 1px #02883d solid;
			border-radius: 2upx;
			color: #02883d;
			font-size: 22upx;
			line-height: 35upx;
			padding: 0 6upx;
			margin-right: 5upx;
		}

		.title {
			flex: 1;
			font-size: 30upx;
		}
	}

	.info_title .icon-shoucang {
		border: 1px $bg-color solid;
		border-radius: 20upx;
		color: $bg-color;
		font-size: 28upx;
		font-weight: bold;
		padding: 2upx 12upx;
	}

	.info_title .collect_active {
		border-color: $base-color;
		color: $base-color;
	}

	.s_swiper_body {
		background-color: #FFFFFF;
		position: relative;

		.swiper_wp {
			position: relative;
			padding: 0 20upx;

			.s_swiper,
			.s_swiper_image {
				border-radius: 10upx;
				height: 300upx;
				width: 100%;
				position: relative;
			}

			.s_swiper_item {
				position: relative;

				.describe {
					background: rgba(0, 0, 0, 0.4);
					border-radius: 10upx;
					color: #fff;
					font-size: 24upx;
					padding: 4upx 20upx;
					position: absolute;
					left: 50%;
					bottom: 20upx;
					transform: translateX(-50%);
					z-index: 100;
				}
			}

			.indicator {
				background: rgba(0, 0, 0, 0.7);
				border-radius: 4upx;
				color: #fff;
				font-size: 24upx;
				padding: 0 15upx;
				position: absolute;
				right: 40upx;
				bottom: 20upx;
			}
		}

		.shop_time {
			border-bottom: 1px hsl(0, 0%, 87%) solid;
			display: flex;
			align-items: center;
			font-size: 28upx;
			padding: 20upx;

			text:nth-of-type(1) {
				flex: 3;
			}

			text:nth-of-type(2) {
				flex: 2;
			}

			text:nth-of-type(3) {
				color: #6ea7fa;
				font-size: 28upx;
				font-weight: bold;
				flex: 1;
			}
		}

		.discount {
			border-bottom: 1px hsl(0, 0%, 87%) solid;
			display: flex;
			align-items: center;
			font-size: 28upx;
			height: 60upx;
			padding: 0 20upx;

			text {
				border: 1px red solid;
				border-radius: 10upx;
				color: red;
				font-size: 26upx;
				margin-right: 20upx;
			}

			text:nth-of-type(1) {
				border: none;
				color: #303133;
				font-size: 26upx;
				font-weight: bold;
			}
		}
	}



	.s_address {
		background: #FFFFFF;
		display: flex;
		align-items: center;
		font-size: 28upx;
		line-height: 35upx;
		padding: 20upx;

		.s_address_info {
			flex: 1;

			text:nth-of-type(2) {

				color: $base-color;
				padding-left: 15upx;
				position: relative;
			}

			text:nth-of-type(2):before {
				border-left: 1px $base-color solid;
				position: absolute;
				top: 8upx;
				content: '';
				left: 8upx;
				height: 25upx;
			}
		}

		.s_location {
			color: #6ea7fa;
			display: flex;
			align-items: flex-end;
			flex-direction: column;
			font-size: 28upx;
			font-weight: bold;
			width: 100upx;

			text:nth-of-type(1) {
				font-size: 42upx;
			}
		}
	}

	.notes {
		.title {

			text-align: center;

			text {
				color: #000;
				display: inline-block;
				border-bottom: 1px red solid;
				font-weight: bold;
				line-height: 60upx;
			}
		}

		.content {
			color: #666;
			font-size: 24upx;
			line-height: 40upx;
			padding: 10upx 20upx;
		}
	}


	.s_title {
		color: #000000;
		font-size: 30upx;
		font-weight: bold;
		margin-bottom: 20upx;
		position: relative;
		text-align: center;
	}

	.s_title::after {
		border-bottom: 2px $base-color solid;
		content: '';
		position: absolute;
		bottom: -2upx;
		left: 50%;
		transform: translateX(-50%);
		width: 110upx;
	}

	.s_ev_empty {
		background-color: #FFFFFF;
		padding: 40upx;
		text-align: center;
	}

	.s_ev_list {
		background-color: #FFFFFF;
		padding: 20upx;
	}

	.ev_tiem_title {
		display: flex;
	}

	.ev_tiem_thumber {
		border-radius: 8upx;
		height: 60upx;
		width: 60upx;
	}

	.ev_nickname_time {
		display: flex;
		justify-content: space-between;
		font-size: 24upx;
		font-weight: bold;
		flex: 1;
		padding-left: 15upx;
	}

	.ev_xing image {
		height: 20upx;
		width: 20upx;
		margin-right: 4upx;
	}

	.ev_time {
		color: $font-color-light;
		font-size: 22upx;
		font-weight: normal;
	}

	.ev_message {
		font-size: 26upx;
		padding: 15upx 20upx;
	}

	.ev_imgs image {
		border-radius: 5upx;
		margin-right: 15upx;
		height: 100upx;
		width: 100upx;
	}

	.ev_more {
		font-size: 22upx;
		text-align: right;
	}

	.s_goods_list {
		padding: 20upx 10upx;
	}

	.goods_item {
		background: #FFFFFF;
		border-radius: 10upx;
		display: inline-block;
		font-size: 26upx;
		margin-bottom: 20upx;
		padding-bottom: 20upx;
		width: calc(50% - 5upx);

	}

	.goods_item:nth-of-type(2n+1) {
		margin-right: 5upx;
	}

	.goods_item:nth-of-type(2n+2) {
		margin-left: 5upx;
	}

	.goods_item image {
		border-radius: 10upx;
		height: 360upx;
		width: 100%;
	}

	.goods_title,
	.goods_saleprice {
		font-weight: bold;
		padding: 0 20upx;
	}

	.goods_title {
		margin-top: 10upx;
		line-height: 35upx;
	}

	.item_productprice {
		color: #606266;
		font-size: 26upx;
		padding: 0 20upx;
		text-decoration: line-through;
	}

	.goods_saleprice {
		color: $base-color;
		font-size: 32upx;
	}

	.money::after {
		content: '元';
		font-size: 22upx;
	}

	.money1::before {
		content: '+';
		font-size: 22upx;
	}

	.money1::after {
		content: '米币';
		font-size: 22upx;
	}

	.money2 {
		color: $font-color-light;
		font-size: $font-sm;
		margin-left: 10upx;
		font-weight: normal;
	}


	.goods_productprice {
		color: $font-color-light;
		font-size: 24upx;
		padding: 0 20upx;
	}

	.s_button {
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 20upx;
		position: fixed;
		width: 100%;
		bottom: 0;
		text-align: center;
		z-index: 500;
	}

	.s_button>view {
		position: relative;
		margin-right: 20upx;
		padding: 20upx;
	}

	.s_share {
		display: flex;
		font-size: 24upx;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.s_share image {
		height: 40upx;
		width: 60upx;
	}

	.s_share_b {
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
		width: 100%;
		z-index: 10;
	}

	.s_pay {
		background-color: $base-color;
		border-radius: 10upx;
		color: #FFFFFF;
		flex: 1;
		width: 200upx;
	}

	.loading_message {
		text-align: center;
		color: #0062CC;
	}

	.loading_message image {
		height: 60upx;
		width: 60upx;
	}

	.sharebg {
		position: fixed;
		z-index: 998;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);

		image {
			width: 80%;
			position: fixed;
			left: 50%;
			top: 50%;
			z-index: 999;
			transform: translate(-50%, -50%);
		}
	}
</style>